import defaultImg from '@/assets/images/200.png'
import Message from './Message'
import Confirm from './Confirm'
// 参数一组件路径,参数二是否加载子文件,参数三后缀文件名,require.context是webpack提供的API
const importFn = require.context('./', false, /\.vue$/)

// 自定义全局指令
const defineDirective = (app) => {
  // Vue3用法,第一个参数v-指令名,inserted变成mounted
  app.directive('lazyLoad', {
    mounted (el, binding) {
      // new实例
      const observer = new IntersectionObserver(([{ isIntersecting }]) => {
        // isIntersecting布尔值,判断是否进入可视区
        if (isIntersecting) {
          // 进入可视区后不再监听dom
          observer.unobserve(el)

          // 图片加载失败给哥默认图
          el.onerror = () => {
            el.src = defaultImg
          }

          // 进入可视区后再赋值src地址拿图片
          el.src = binding.value
        }
      }, {
        // 图片进入可视区占比
        threshold: 0.01
      })

      // 监听dom
      observer.observe(el)
    }
  })
}

export default {
  install (app) {
    // 自动注册全局组件,组件必须有name
    // importFn.keys()数组获取所有文件的路径
    importFn.keys().forEach(key => {
      const component = importFn(key).default
      app.component(component.name, component)
    })

    // 注册自定义全局指令
    defineDirective(app)

    // Vue2里Vue.prototype.$Message挂载
    // Vue3里app.config.globalProperties.$message挂载
    // 如果你想挂载全局的属性，能够通过组件实例调用的属性   this.$message
    app.config.globalProperties.$message = Message// 原型函数
    app.config.globalProperties.$confirm = Confirm// 原型函数
  }
}
